<style lang="scss" scoped>
* {
  font-size: 0.9rem;
}
.register {
  width: 100vw;
  height: 100vh;
  background: url("../../static/images/login/login_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.scroll-Y {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  //   缩小 0.8
}
// top_logo
.top_logo {
  width: 100%;
  text-align: center;
  overflow: hidden;
  .top_img1 {
    image {
      width: 6rem;
    }
  }
  .top_img2 {
    image {
      width: 8rem;
    }
  }
  .top_img3 {
    image {
      width: 12rem;
    }
  }
}
// top_logo
// section_form
.section_form {
  margin-top: 1rem;
  width: 100%;
  padding: 0 2rem;
  .title {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 1rem;
  }
  .u-form {
    .u-form-item {
      background-color: #fff;
      border: none;
      border-radius: 0.5rem;
      padding: 0.5rem 1.5rem;
      margin-bottom: 0.5rem;
      .getCode {
        color: #f99451;
      }
    }
  }
  .button {
    background: linear-gradient(90deg, #fa9553 0%, #fa7563 100%);
    color: #fff;
    margin-top: 2rem;
    border-radius: 2rem;
  }
}
// section_form
// footer_text
.footer_text {
  margin-bottom: 1rem;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  .checkbox_style {
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep .u-checkbox__label {
      margin-right: 0;
    }
  }
  .text_ {
    font-size: 0.9rem;
    .mainColor {
      font-size: 0.9rem;
      color: #fa8c52;
    }
  }
  .footer_btn {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    text {
      margin: 0 0.5rem;
    }
    .footer_btn_text1 {
      color: #c0c4cc;
    }
    .footer_btn_text2 {
      color: #fa8c52;
    }
  }
}
// footer_text
</style>

<template>
  <view class="register">
    <view class="scroll-Y">
      <!---------- top_logo -S ---------->
      <view class="top_logo">
        <view class="top_img1">
          <image src="../../static/images/login/top_img1.png" mode="widthFix" />
        </view>
        <view class="top_img2">
          <image src="../../static/images/login/top_img2.png" mode="widthFix" />
        </view>
        <view class="top_img3">
          <image src="../../static/images/login/top_img3.png" mode="widthFix" />
        </view>
      </view>
      <!---------- top_logo -E ---------->
      <!---------- section_form -S ---------->
      <view class="section_form">
        <view class="title">注册账号</view>
        <u-form :model="formData" ref="uForm">
          <u-form-item label="" right-icon="account-fill">
            <u-input
              maxlength="11"
              v-model="formData.account"
              placeholder="手机号码"
              :clearable="true"
            />
          </u-form-item>
          <u-form-item label="">
            <u-input
              maxlength="11"
              v-model="formData.account"
              placeholder="验证码"
              :clearable="true"
            />
            <u-toast ref="uToast"></u-toast>
            <u-verification-code
              :seconds="60"
              ref="uCodeRef"
              @change="codeChange"
              start-text="获取验证码"
            ></u-verification-code>
            <view slot="right" class="getCode" @tap="getCode">
              {{ state.verificationText }}
            </view>
          </u-form-item>
          <u-form-item label="">
            <u-input
              v-model="formData.password"
              placeholder="设置新密码"
              type="password"
              :clearable="true"
              :border-bottom="false"
            />
          </u-form-item>
          <u-form-item label="">
            <u-input
              v-model="formData.password"
              placeholder="确认新密码"
              type="password"
              :clearable="true"
              :border-bottom="false"
            />
          </u-form-item>
          <u-form-item label="">
            <u-input
              v-model="formData.password"
              placeholder="确认新密码"
              type="password"
              :clearable="true"
              :border-bottom="false"
            />
          </u-form-item>
        </u-form>
        <u-button
          class="button"
          round
          :ripple="true"
          :hair-line="false"
          ripple-bg-color="#fa8c76"
        >
          注册
        </u-button>
      </view>
      <!--------- section_form -E ---------->
      <!---------- footer_text -S ---------->
      <view class="footer_text">
        <view class="checkbox_style">
          <u-checkbox v-model="isCheckAgreement"> </u-checkbox>
          <view class="text_">
            我已阅读并同意
            <span class="mainColor" @click="goagreement(1)">《服务协议》</span>
            <span class="mainColor" @click="goagreement(2)">《隐私政策》</span>
          </view>
        </view>
        <view class="footer_btn">
          <text class="footer_btn_text1">已有账号？</text>
          <text class="footer_btn_text2" @click="gologin">立即登录</text>
        </view>
      </view>
      <!---------- footer_text -E --------->
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const uCodeRef = shallowRef();
const formData = reactive<{
  account: string;
  password: string;
}>({
  account: "",
  password: "",
});
const isCheckAgreement = ref(false);
const state = reactive<{
  verificationText: string;
}>({
  verificationText: "获取验证码",
});
onLoad(() => {
  console.log("onLoad");
});
onShow(() => {
  console.log("onShow");
});
// 返回登录
const gologin = () => {
  uni.navigateBack();
};
// 获取验证码
const getCode = () => {
  // 校验手机号
  if (!formData.account) return uni.$u.toast("请输入手机号");
  if (uCodeRef.value?.canGetCode) {
    uCodeRef.value.start();
  } else {
    uni.$u.toast("倒计时结束后再试试");
  }
};
// 验证码倒计时
const codeChange = (value: string) => {
  state.verificationText = value;
};
// 跳转协议
const goagreement = (type) => {
  uni.navigateTo({ url: "/pages/agreement/agreement?type=" + type });
};
</script>
